<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>GEarthExtensions Samples - Polygon Draw/Edit</title>
  <script src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBTgHOxFyKCf35LCvsI_n4URElrkIhS9MkSlm_0NZWgrKFkOsnd5rEK0Lg" type="text/javascript"></script>
  <script src="../dist/extensions.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */

var ge = null;
var gex = null;

google.load('earth', '1');

google.setOnLoadCallback(function() {
  google.earth.createInstance('map3d', function(pluginInstance) {
    ge = pluginInstance;
    ge.getWindow().setVisibility(true);

    gex = new GEarthExtensions(pluginInstance);

    gex.util.lookAt([0, 0], { range: 600000 });

  }, function() {});
});

var polyPlacemark = null;

function drawPoly() {
  polyPlacemark = gex.dom.addPolygonPlacemark([], {
    style: {
      poly: '8000ff00',
      line: { width: 3, color: '#0f0' }
    }
  });

  gex.edit.drawLineString(polyPlacemark.getGeometry().getOuterBoundary());
}

function editPoly() {
  if (!polyPlacemark) {
    alert('You must draw a poly before editing it!');
    return;
  }

  gex.edit.editLineString(polyPlacemark.getGeometry().getOuterBoundary());
}

function stopEditPoly() {
  if (!polyPlacemark) {
    alert('No poly to stop editing!');
    return;
  }

  gex.edit.endEditLineString(polyPlacemark.getGeometry().getOuterBoundary());
}

/* ]]> */
</script>
</head>
<body>
<input type="button" onclick="drawPoly();" value="Draw Polygon"/>
<input type="button" onclick="editPoly();" value="Edit Polygon"/>
<input type="button" onclick="stopEditPoly();" value="Finish Edit"/>
  <div id="map3d_container" style="width: 500px; height: 500px;">
    <div id="map3d" style="height: 100%"></div>
  </div>
</body>
</html>